<template>
  <div class="board">
    <div class="breadcrumb">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>生产看板</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <el-row :gutter="20">
      <el-col :span="8">
        <div class="grid-content bg-purple">
          <chart auto-resize style="width:100%;" :options="barData" theme="walden"></chart>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="grid-content bg-purple">
          <chart auto-resize style="width:100%;" :options="pieData" theme="walden"></chart>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="grid-content bg-purple">
          <chart auto-resize style="width:100%;" :options="lineData" theme="walden"></chart>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="7">
        <OrderTable :myTableData="orderData"></OrderTable>
      </el-col>
      <el-col :span="10">
        <ProductTable :myTableData="productData"></ProductTable>
      </el-col>
      <el-col :span="7">
        <QaTable :myTableData="qaData"></QaTable>
      </el-col>
    </el-row>
  
  
  
  </div>
</template>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
  
/*   .el-table tr {
    background: #2c343c;
    color: #ffffff;
  }
  
  .el-table thead.is-group th {
    background: #2c343c;
  } */
</style>

<script>
  import OrderTable from '@/components/board/orderTable'
  import ProductTable from '@/components/board/productTable'
  import QaTable from '@/components/board/qaTable'
  
  import ECharts from 'vue-echarts/components/ECharts.vue'
  import 'echarts/lib/chart/line'
  import 'echarts/lib/chart/pie'
  import 'echarts/lib/component/polar'
  import 'echarts/lib/component/title'
  import 'echarts/lib/component/tooltip'
  import theme from '@/assets/walden.json'
  ECharts.registerTheme('walden', theme)
  
  import barData from './data/bardata'
  import pieData from './data/piedata'
  import lineData from './data/linedata'
  
  export default {
    components: {
      OrderTable,
      ProductTable,
      QaTable
    },
    methods: {
      tableRowClassName({
        row,
        rowIndex
      }) {
        if (row.zt == '1') {
          return 'warning-row'; //等待
        } else if (row.zt == '0') {
          return 'success-row'; //生产
        } else if (row.zt == '2') {
          return 'primary-row'; //完成
        } else if (row.zt == '-1') {
          return 'danger-row'; //错误
        }
        return '';
      }
    },
    data() {
      return {
        barData: barData,
        pieData:pieData,
        lineData:lineData,
        orderData: {
          data: [{
              no: '1341-1711010033',
              name: 'N7#AA注塑开口',
              count: '111'
            },
            {
              no: '1341-1711010034',
              name: 'N7#AA注塑开口',
              count: '222'
            },
            {
              no: '1341-1711010019',
              name: 'N7#AA注塑开口',
              count: '5333'
            },
            {
              no: '1341-1711010035',
              name: 'N7#AA注塑开口',
              count: '333'
            }
          ]
        },
  
        productData: {
          data: [{
              ly: 'CC-01',
              fk: 'FF-01',
              xc: 'SA-01',
              sz: 'SS-01',
              zz: 'Z01',
              bz: 'A'
            },
            {
              ly: 'CC-02',
              fk: 'FF-01',
              xc: 'SA-01',
              sz: 'SS-01',
              zz: 'Z01',
              bz: 'A'
            },
            {
              ly: 'CC-03',
              fk: 'FF-01',
              xc: 'SA-01',
              sz: 'SS-01',
              zz: 'Z01',
              bz: 'A'
            }
          ]
        },
  
        qaData: {
          data: [{
              platform: 'III-01',
              lpl: '98.56%',
              qxs: '8',
              ycqx: '0'
            },
            {
              platform: 'III-02',
              lpl: '98.56%',
              qxs: '8',
              ycqx: '0'
  
            },
            {
              platform: 'III-03',
              lpl: '98.56%',
              qxs: '8',
              ycqx: '0'
  
            }
          ]
        },
  
  
  
  
  
  
      
      }
    }
  }
</script>


